import echarts from "echarts"
// var echarts = require('echarts/lib/echarts');单独引入
// require('echarts/lib/chart/map');
export const echartsTools = (function () {
    return {
        map: function (chartIndex, title, bigNum, data,unit) {
            let myChart = echarts.init(document.getElementsByClassName('map_zone')[chartIndex]);
            // 绘制图表
            let mapOption = {
                title: {
                    left: 'center',
                    top: 50,
                    text: title,
                    textStyle: {
                        color: '#464646',
                        fontFamily: "PingFangSC",
                        fontSize: 33
                    },
                    subtextStyle: {
                        fontSize: 67,
                        fontFamily: 'Roboto-Medium',
                        fontWeight: 500,
                        color: 'rgb(19,127,246)'
                    },
                    subtext: bigNum,
                },
                tooltip: {
                    trigger: 'item',
                    triggerOn: 'click',
                    formatter: function(params){
                        console.log(params);//去取一下tooltip数据（预算进度）
                        let $el1 = "<span style='color: #F8E71C;font-weight:500;font-size:15px;line-height: 30px;'>",
                            $el2 = "<span style='color: #FFFFFF;font-weight:400;font-size:13px;line-height: 23px;display: inline-block;width: 50%;text-align: left;'>",
                            $el3 = "<span style='color: #F8E71C;font-weight:400;font-size:15px;line-height: 23px;display: inline-block;width: 50%;text-align: right;'>",
                            $el4 = "</span>",
                            str = $el1 + params.name + $el4 + "<br/>" +
                                  $el2 + params.seriesName + $el4 + "  " +
                                  $el3 + params.data.value[0] + unit + $el4 + "<br/>" +
                                  $el2 + "预算进度" + $el4 + "  " +
                                  $el3 + params.data.value[1] + "%" + $el4;
                        return str;
                    },
                    backgroundColor:'rgba(6,66,131,.9)',
                    borderColor: '#4A90E2',
                    borderWidth: 1,
                    padding: 10
                },
                grid: {
                    left: '10%',
                    right: 200,
                    top: '35%',
                    bottom: '10%'
                },
                visualMap: [
                    {
                        type: 'piecewise',
                        left: 50,
                        bottom: 50,
                        min: 0,
                        max: 220,
                        // dimension: 1,//根据数据的第几位展示
                        // seriesIndex: [1],
                        categories: ['前五省', '中间省份', '后五省'],
                        inRange: {
                            color: ['#0564C6', '#05A5F5', '#FF9900'],
                            symbolSize: 30,
                            symbol: 'circle'
                        },
                        itemGap: 13,
                        itemWidth: 20,
                        itemHeight: 140,
                        textStyle: {
                            color: '#333',
                            fontStyle: 'normal',
                            fontWeight: 'normal',
                            fontFamily: 'PingFangSC-Regular',
                            fontSize: 25,
                        }
                    },
                    {
                        min: 0,
                        max: 200,
                        show: false,
                        // dimension: 0,
                        seriesIndex: [1],
                        // inRange: {
                        //     color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
                        //     symbolSize: [30, 100]
                        // }
                    }
                ],
                series: [
                    {
                        name: "主营业务收入",
                        type: 'map',
                        map: 'china',
                        mapType: "",
                        zoom: 1.05,
                        // top: '5%',
                        //          roam: true,//缩放
                        selectedMode: false,
                        itemStyle: {
                            borderWidth: 1,
                            borderColor: '#8EC8F9',
                        },
                        emphasis: {
                            itemStyle: {
                                areaColor: '#3498DB',
                                shadowBlur: 10,
                                shadowColor: '#34495E',
                                shadowOffsetX: 5,
                                shadowOffsetY: 5
                            }
                        },
                        scaleLimit: {
                            min: 0.5,
                            max: 2.5,
                        },
                        label: {
                            normal: {
                                show: true,
                                textStyle: {
                                    color: '#000000'
                                }
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        data: data
                    }
                ]
            };
            myChart.setOption(mapOption);
        },
        drawGeneraPie: function (index,seriesArr) {

            var myChart = echarts.init(document.getElementsByClassName("echarts")[index]);

            // 指定图表的配置项和数据
            option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                color: [
                    '#ff7f71', '#FFE9EB',
                ],
                series: [
                    {
                        type: 'pie',
                        radius: ['100%', '80%'],
                        avoidLabelOverlap: false,
                        data: seriesArr,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                show: true,
                            }
                        },
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        },
    
    Bar: function () {
            let myChart = echarts.init(document.getElementById('myBar'));
            // 绘制图表
            var dataShadow = [];
			var data = [134, 90, 230, 210, 201, 154, 190, 330, 410, 201];
			var yMax = 500;
			var dataShadow = [];
			
			
			for (var i = 0; i < data.length; i++) {
			    dataShadow.push(yMax);
			}
            let myBarOption = {
               
    grid: {
        left: '4%',
        right: '7%',
        bottom: '8%',
        top:'3%',
        containLabel: true
    },
     
    xAxis:  {
    	show:false,
        type: 'value',
        boundaryGap: [0.2,  0.005],
        splitLine:{show:false},
        axisLine: {show: false}, 
         axisTick: {show: false}
    },
     yAxis: [{
     	 
     	  axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
          axisLabel: {
            show: true,
            textStyle: {
                
                 fontSize:15
            }
                   },
         splitLine: {
       show: false 
      },
       type: 'category',
        data: ['江西','湖南','湖南','浙江','山西','山东','河南','广西','河北','广东']
    },{
    	 axisLabel: {
            show: true,
            textStyle: {
                color: '#F5A723' ,
                 fontSize:15
            }
                   },
    	 axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
         
         splitLine: {
       show: false 
      },
       type: 'category',
        data: [ 134, 90, 230, 210, 201, 154, 190, 330, 410, 201]
    } ],
     series: [
      { // For shadow
            type: 'bar',
            itemStyle: {
                normal: {color: 'rgba(0,0,0,0.05)',
                barBorderRadius: 20
                },
                
            },
            barGap:'-100%',
            barCategoryGap:'80%',
            data: dataShadow,
//          barWidth:3,
            animation: false
        },
        {
            type: 'bar',
            itemStyle: {
                normal: { 
                	barBorderRadius: 20,
                    color:  '#F5A723'
                },
                emphasis: {
                    color: '#F5A723'
                }
            },
            data: [ 134, 90, 230, 210, 201, 154, 190, 330, 410, 201]
       }
    ]
            };
            myChart.setOption(myBarOption);
        }, 
    
    line: function (data) {
            let myChart = echarts.init(document.getElementById('myLine'));
            // 绘制图表
           
            let myLineOption = {
			     title: {
			    },
			    tooltip: {
			        trigger: 'axis',
			         axisPointer: {
			                type: 'cross',
			                animation: true,
			                label: {
			                    backgroundColor: '#ccc',
			                    borderColor: '#aaa',
			                    borderWidth: 1,
			                    shadowBlur: 0,
			                    shadowOffsetX: 0,
			                    shadowOffsetY: 0,
			                    textStyle: {
			                        color: '#222'
			                    }
			                }
			            },
			    },
			    legend: {
			    	right: '4%',
			    	top: '7%',
			        lineHeight: 56,
			         width:'',
			         height:'',
			         itemSize:'10',
			         yearlinedata:[ '今年','去年' ]
			    },
			    grid: {
			       left: '3%',
			        right: '8%',
			        bottom: '3%',
			        containLabel: true
			    },
			     
			    xAxis: {
			        type: 'category',
			        boundaryGap: false,
			         data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月']
			    },
			    yAxis: {
			       type: 'value',
			//      axisLine: {
			//          show: false
			//      },
			//      axisTick: {
			//          show: false
			//      },
			         
			         splitLine: {
			       show: false 
			      },
			    },
			    series: [
			        {
			            name:'今年',
			            color:'#F5A723',
			            type:'line',
			           // stack: '总量',
			            label: {
			                normal: {
			                	color:'black',
			//                  show: true,
			                    position: 'top'
			                }
			            },
			            data:[120, 100, 191, 204,  100, 30, 300, 100, 100, 300]
			        } ,
			        {
			            name:'去年',
			            color:'#31CABB',
			            type:'line',
			           // stack: '总量',
			            label: {
			                normal: {
			                	color:'black',
			//                  show: true,
			                    position: 'top'
			                }
			            },
			            data:[520, 500, 891, 404, 200, 700, 400, 900, 800, 700]
			        } 
			    ]
     
     
     
            };
            myChart.setOption(myLineOption);
        }, 
    
    
    }
})();
